<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 498px;
            height: 318px;
        }
        .numberPeople {
            height: 42px;
            border-bottom: 1px solid #d8d8d8;
        }
        .numberPeople span {
            line-height: 42px;
        }
        .infoTable {
            margin-top: 14px;
            width: 470px;
            border: 1px solid #d8d8d8;
        }
        .infoTable   thead{
            display: block;
        }
        .infoTable thead tr {
            width: 70px;
            background: #e4e5e9;
        }
        .infoTable td {
            text-align: center;
            border: 1px solid #d8d8d8;
        }
        .infoTable #student_list {
            display: block;
            width: 468px;
            height: 244px;
            overflow: auto;
        }

        .mi{
            width: 130px;
        }
        .xu {
            width: 52px;
        }

        .zao {
            width: 80px;
        }

        .chu {
            width: 80px;
        }

        .chi {
            width: 80px;
        }

        #student_list .mi {
            width: 151px;
        }
        #student_list .xu {
            width: 57px;
        }

        #student_list  .zao {
            width: 88px;
        }

        #student_list .chu {
            width: 88px;
        }

        #student_list .chi {
            width: 88px;
        }

        #student_list .mi {
            width: 146px;
        }
        .div i {
            border-top: 5px solid #32ab9e;
            position: absolute;
            top: -2px;
            width: 100%;
            left: 0;
        }
        #hide .three {
            z-index: 9999;
            position: relative;
            right: 0;
            top: -10px;
            width: 6px;
            height: 6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #32ab9e;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="numberPeople">
        <span>详情</span>
    </div>
    <table class="infoTable" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <td rowspan="2" class="xu">No.</td>
            <td rowspan="2" class="mi">学生姓名</td>
            <td colspan="3" style="width: 290px">考勤</td>
        </tr>
        <tr>
            <td colspan="1" class="chi">迟到</td>
            <td colspan="1" class="chi">早退</td>
            <td colspan="1" class="chi">出勤</td>
        </tr>
        </thead>
        <tbody id="student_list">
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        <tr>
            <td class="xu">01</td>
            <td class="mi">张子栋</td>
            <td class="chi">-&#45;&#45;</td>
            <td class="chu">-&#45;&#45;</td>
            <td class="zao">-&#45;&#45;</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
</script>
</body>
</html>